<template>
    <div class="btm-box">
        <img :src="qiqiu1" alt="返回" class="qiqiu qiqiu1">
        <img :src="qiqiu2" alt="插入文本" class="qiqiu qiqiu2" @click="insertCom('textTpl')">
        <img :src="qiqiu3" alt="插入图片" class="qiqiu qiqiu3" @click="insertCom('imgTpl')">
        <img :src="img1" alt="" class="img1">
    </div>
</template>

<script setup lang="ts">
//引入assts里面的图片
import img1 from '@/assets/img/img1.png'
import qiqiu1 from '@/assets/img/img-qiqiu1.png'
import qiqiu2 from '@/assets/img/img-qiqiu2.png'
import qiqiu3 from '@/assets/img/img-qiqiu3.png'
import { defineProps, defineEmits } from 'vue'

const emit = defineEmits(['insertCom'])

const insertCom = (e: string) => {
    emit('insertCom', e)
}

</script>

<style lang="scss" scoped>
.btm-box {
    width: 100vw;
    position: fixed;
    bottom: -50px;
    left: 0;
    z-index: 2;

    .img1 {
        width: 100%;
        transform: scale(1.2);
    }

    .qiqiu {
        width: 150px;
        height: 215px;
        position: absolute;
        z-index: 9;
    }

    .qiqiu1 {
        top: -50px;
        left: 30px;
    }

    .qiqiu2 {
        left: 270px;
    }

    .qiqiu3 {
        right: 70px;
        top: -100px;
    }
}
</style>
